<template>
  <view class="wrap">
    <view class="header-box">
      <image
        class="header-bg"
        src="https://ainengli.hzjrsw.com/jkhx/weight/sleep.png"
        mode="scaleToFill"
      />
    </view>
    <view class="sleep-grid">
      <view class="sleep-grid-col" @tap="gridHandle('sleepAssessment')">
        <img
          class="grid-image"
          src="https://ainengli.hzjrsw.com/jkhx/common/sleep-assessment.png"
          alt=""
        />
        <view class="grid-text-wrap">
          <text class="sleep-name">睡眠评估</text>
          <view class="grid-text">
            <text class="sleep-btn">立即查看</text>
            <!-- <image class="text-icon" src="" mode="scaleToFill" /> -->
          </view>
        </view>
      </view>
      <view class="sleep-grid-col" @tap="gridHandle('relax')">
        <img class="grid-image" src="https://ainengli.hzjrsw.com/jkhx/common/relax.png" alt="" />
        <view class="grid-text-wrap">
          <text class="relax-name">正念放松</text>
          <view class="grid-text">
            <text class="defult-btn">立即查看</text>
            <!-- <image class="text-icon" src="" mode="scaleToFill" /> -->
          </view>
        </view>
      </view>
      <view class="sleep-grid-col" @tap="gridHandle('music')">
        <img class="grid-image" src="https://ainengli.hzjrsw.com/jkhx/common/music.png" alt="" />
        <view class="grid-text-wrap">
          <text class="music-name">音乐助眠</text>
          <view class="grid-text">
            <text class="defult-btn">立即查看</text>
            <!-- <image class="text-icon" src="" mode="scaleToFill" /> -->
          </view>
        </view>
      </view>
      <view class="sleep-grid-col" @tap="gridHandle('breatheHelpsSleep')">
        <img class="grid-image" src="https://ainengli.hzjrsw.com/jkhx/common/breath.png" alt="" />
        <view class="grid-text-wrap">
          <text class="breath-name">呼吸助眠</text>
          <view class="grid-text">
            <text class="breath-btn">立即查看</text>
            <!-- <image class="text-icon" src="" mode="scaleToFill" /> -->
          </view>
        </view>
      </view>
    </view>
    <view class="article-box">
      <view class="article-main">
        <view class="title-box">
          <text class="title-wrap">知识科普</text>
        </view>

        <view class="list">
          <view v-for="(item, index) of List" :key="index" @tap="readDetail(item)" class="item">
            <view :class="['item-left', item.picList.length > 0 ? '' : 'width100']">
              <view class="item-title">{{ item.title }}</view>
              <view class="item-content">{{ item.summary }}</view>
            </view>
            <img v-if="item.pic" class="item-right" :src="item.pic.split(',')[0]" alt="" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { educationList } from '../../api/sleep'
import store from '@/store'
import type { sleepArticlesData } from './sleepModel'

const List = ref<sleepArticlesData[z]>([])

onShow(() => {
  educationList({
    page: 1,
    limit: 1000,
    categoryName: '睡眠',
    labelCode: '',
    empi: store.state.userInfo.empi
  }).then((res: any) => {
    List.value = res.data.list
  })
})

const gridHandle = (name: string) => {
  uni.navigateTo({
    url: `/module/src/pages/sleep/${name}/index`
  })
}

const readDetail = (data: any) => {
  uni.navigateTo({
    url: `/module/src/pages/sleep/detail?id=${data.id}`
  })
}
</script>
<style lang="scss" scoped>
.wrap {
  position: relative;
  min-height: 100vh;
  padding-bottom: 70rpx;
}

.header-box {
  // position: absolute;
  z-index: 1;
  width: 100%;
  height: 467.77rpx;

  .header-bg {
    width: 100%;
    height: 467.77rpx;
  }
}

.sleep-grid {
  position: absolute;
  top: 294rpx;
  left: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 24rpx 26rpx;
  width: 100%;
  padding: 32rpx 30rpx 0rpx 32rpx;
  background: linear-gradient(180deg, rgb(255 255 255 / 90%) 0%, #f3f7f8 100%), #fff;
  border-radius: 24rpx 24rpx 0rpx 0rpx;
}

.sleep-grid-col {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  width: 332rpx;
  height: 150rpx;
  padding: 32rpx 24rpx;
  color: #fff;
}

.grid-text-wrap {
  display: flex;
  flex-direction: column;
  font-size: 36rpx;

  .grid-text {
    display: flex;
    margin-top: 8rpx;
    font-size: 20rpx;
  }
}

.grid-image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.text-icon {
  width: 24rpx;
  height: 24rpx;
}

.title-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0rpx 0 32rpx;
}

.title-wrap {
  font-size: 36rpx;
  font-weight: 700;
  line-height: 50rpx;
  color: #000;
}

.list {
  .item {
    display: flex;
    gap: 24rpx;
    justify-content: space-between;
    margin-bottom: 48rpx;

    .item-left {
      width: 384rpx;

      .item-title {
        overflow: hidden;
        font-size: 32rpx;
        font-weight: 700;
        color: #222;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .item-content {
        display: -webkit-box;
        margin-top: 24rpx;
        overflow: hidden;
        font-size: 24rpx;
        font-weight: 700;
        color: #999;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }

    .width100 {
      width: 100%;
    }

    .item-right {
      width: 213rpx;
      height: 148rpx;
      border-radius: 16rpx;
    }
  }

  .item:last-child {
    margin-bottom: 0;
  }
}

.sleep-name {
  font-size: 32rpx;
  font-weight: 700;
  color: #033335;
}

.relax-name {
  font-size: 32rpx;
  font-weight: 700;
  color: #172557;
}

.music-name {
  font-size: 32rpx;
  font-weight: 700;
  color: #172557;
}

.breath-name {
  font-size: 32rpx;
  font-weight: 700;
  color: #5f4209;
}

.sleep-btn {
  font-size: 26rpx;
  font-weight: 400;
  color: #08b09b;
}

.defult-btn {
  font-size: 26rpx;
  font-weight: 400;
  color: #596693;
}

.breath-btn {
  font-size: 26rpx;
  font-weight: 400;
  color: #b89755;
}

.article-box {
  left: 0;
  z-index: 3;
  width: 100%;
  // height: calc(100vh - 688rpx);
  padding: 0 32rpx;
  // position: absolute;
  margin-top: 200rpx;

  .article-main {
    width: 100%;
    // height: calc(100vh - 762rpx);
    padding: 32rpx;
    background: #fff;
    border-radius: 24rpx;
  }
}
</style>
